<template>
  <div>
    <a-tabs default-active-key="1" size="large">
      <a-tab-pane key="1" tab="教育培训">
        <div>
          <div class="projectwarp">
            <div>
              <div class="warptop" v-if="tableshow">
                <a-input-search placeholder="输入课程名称" style="width: 200px;height: 32px;float: left;" />
                <a-select v-model:value="value1" :size="size" style="width: 200px;float: left;margin-left: 16px;"
                  :options="options"></a-select>
                <a-button type="primary" style="float: right;" @click="createnewfc()">
                  <a-icon type="plus" />
                  新建
                </a-button>
              </div>

              <!-- 表格 -->
              <a-table :data-source="dataSource" :columns="columns" v-if="tableshow">
                <template slot='state' slot-scope="item,row">
                  <span v-if="item==0" class="daishenhe"><span class="dots dotdaishen"></span>待审核</span>
                  <span v-if="item==1" class="yishenhe"><span class="dots dotyishen"></span>已审核</span>
                  <span v-if="item==2" class="yibohui"><span class="dots dotyibo"></span>已驳回</span>
                </template>

                <template slot='state1' slot-scope="item,row">
                  <span v-if="item==0" class="daishenhe">上线</span>
                  <span v-if="item==1" class="yishenhe">下线</span>
                </template>

                <template slot="cover" slot-scope="item,row">
                  <a href="#" class="txta" @click="createnewfc()">编辑</a>
                  <a href="#" class="txta" @click="catalogueShowfc()">目录</a>
                  <a v-if="row.state1==1" href="#" class="txta" @click="">上线</a>
                  <a v-if="row.state1==0"  href="#" class="txta" @click="">下线</a>
                </template>
              </a-table>
            </div>
          </div>


        </div>


        <!-- 新建项目页面 -->
        <div v-if="createnew" class="creatkc">
            <div class="form1">
              <span class="titles"><span class="xinghao">*</span>主图：</span>
              <a-upload
                name="filecontent"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                action="/api/upload/img"
                :before-upload="beforeUpload"
                @change="handleChange($event, 'Disabilityimg')"
              >
                <img
                  style="width: 80px; height: 80px"
                  v-if="Disabilityimg"
                  :src="imageWebUrl + Disabilityimg"
                  alt="avatar"
                />
                <div v-else>
                  <img
                    style="width: 80px"
                    src="@/assets/image/competition/uploadImg.png"
                    alt="image"
                  />
                </div>
              </a-upload>
              <span class="txt32">只支持.jpg，.png 格式,不能大于1G</span>
            </div>
            <div>
              <span class="titles"><span class="xinghao">*</span>课程标题：</span>
              <a-input v-model:value="value" placeholder="" style="width: 640px;height: 40px;" />
            </div>
            <div class="flx1 mt20">
              <div class="flx2">
                <span class="titles"><span class="xinghao">*</span>讲师：</span>
                <a-input v-model:value="value" placeholder="" style="width: 280px;height: 40px;" />
              </div>
              <div class="flx2">
                <span class="titles"><span class="xinghao">*</span>课程分类：</span>
                <a-select v-model:value="value1" :size="size" style="width: 280px;height: 40px;"
                  :options="options"></a-select>
              </div>
            </div>
            <div>
              <span class="titles"><span class="xinghao">*</span>标签</span>
              <a-input v-model:value="value" placeholder="" style="width: 640px;height: 40px;" />
            </div>

            <div class="mt20">
              <span class="titles"><span class="xinghao">*</span>课程简介：</span></span>
              <a-textarea v-model:value="value" placeholder="" :rows="4" style="width: 640px;"  />
            </div>
            <div class="mt20">
              <span class="titles"><span class="xinghao">*</span>详情介绍</span>
              <!-- 富文本 -->
              <UE
                editorId="sponsorEditor"
                :initContent="ueSponsorInit"
                @input="getSponsorContent"
              />
            </div>

            <div class="mt20">
               <span><span class="xinghao">*</span>是否开启目录</span><a-switch v-model:checked="checked" />
            </div>


            <div class="mt20">
              <a-button @click="showtable()" style="width: 108px;height: 40px;">返回</a-button>
              <a-button type="primary" style="width: 108px;height: 40px;margin-left: 16px;">保存</a-button>
            </div>

          </div>

          <!-- 编辑目录 -->
          <div class="catalogue" v-if="catalogueShow">
             <div style="margin-top: 18px;">
                <a-button type="primary" @click="addcataloguestcfc()">新增章节</a-button>
                <a-button style="margin-left: 20px;" type="primary" @click="addcatalogue()">新增课程视频</a-button>
             </div>

             <p style="margin-top: 18px;">目录结构：</p>
             <div style="min-height: 500px;overflow-y: auto;">
               <a-tree
                   checkable
                   :tree-data="treeData"
                   v-model:expandedKeys="expandedKeys"
                   v-model:selectedKeys="selectedKeys"
                   v-model:checkedKeys="checkedKeys"
                   :defaultExpandAll='true'
                 >
                   <template #title0010><span style="color: #1890ff">sss</span></template>
                 </a-tree>
             </div>
             <div class="mt20">
               <a-button @click="showtables()" style="width: 108px;height: 40px;">返回</a-button>
               <a-popconfirm
                   title="你确认删除该章节吗？"
                   ok-text="确认"
                   cancel-text="取消"
                   @confirm="confirm"
                   @cancel="cancel"
                 >
                   <a-button style="width: 108px;height: 40px;margin-left: 16px;">删除</a-button>
                 </a-popconfirm>

               <a-button style="width: 108px;height: 40px;margin-left: 16px;">保存</a-button>
               <a-button type="primary" style="width: 108px;height: 40px;margin-left: 16px;">提交</a-button>
             </div>
          </div>


      </a-tab-pane>
    </a-tabs>
    <Loading v-show="onLoading"></Loading>
    <!-- 新增视频 -->
    <div class="zjinfotc" v-if="addcataloguetc">
      <div class="zjzhezhao"></div>
      <div class="zhuanjiainfotc" >
        <p class="tittxt">新建课程视频</p>
        <div class="zjclose2">
          <img src="@/assets/image/competition/close2.png" alt="">
        </div>
        <div class="zjclose" @click="addcataloguetc=false">
          <img src="@/assets/image/competition/close.png" alt="">
        </div>
        <div class="contentsf">
          <div class="form1 mt32">
            <span class="titles"><span class="xinghao">*</span>主图：</span>
            <a-upload
              name="filecontent"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              action="/api/upload/img"
              :before-upload="beforeUpload"
              @change="handleChange($event, 'Disabilityimg')"
            >
              <img
                style="width: 80px; height: 80px"
                v-if="Disabilityimg"
                :src="imageWebUrl + Disabilityimg"
                alt="avatar"
              />
              <div v-else>
                <a-icon type="plus" />
                <p>上传照片</p>

              </div>
            </a-upload>
            <span class="txt32">只支持.jpg，.png 格式,不能大于1G</span>
          </div>
          <div class="mt20">
            <span class="titles"><span class="xinghao">*</span>标题：</span>
            <a-input v-model:value="value" placeholder="" style="width: 400px;height: 40px;" />
          </div>
          <div class="mt20">
            <span class="titles"><span class="xinghao">*</span>上传视频</span>
            <a-upload
                v-model:file-list="fileList"
                name="file"
                :multiple="false"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :headers="headers"
                @change="handleChange"
                accept="video/*"
              >
                <a-button>
                  <a-icon type="upload" />
                  上传视频
                </a-button>
                <span class="txt32">只能上传视频文件，且不超过300M</span>
              </a-upload>
          </div>
          <div class="mt20">
            <span class="titles"><span class="xinghao">*</span>视频总时长（分钟）</span>
            <a-input v-model:value="value" placeholder="" style="width: 400px;height: 40px;" />
          </div>
          <div style="margin-top: 40px;text-align: center;">
            <a-button  @click="addcataloguetc=false" style="width: 108px;height: 40px;margin-left: 16px;">取消</a-button>
            <a-button type="primary" style="width: 108px;height: 40px;margin-left: 16px;">确认</a-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增视频 -->
    <div class="zjinfotcs" v-if="addcataloguestc">
      <div class="zjzhezhao"></div>
      <div class="zhuanjiainfotcs" >
        <p class="tittxt">新建章节</p>
        <div class="zjclose2">
          <img src="@/assets/image/competition/close2.png" alt="">
        </div>
        <div class="zjclose" @click="addcataloguestc=false">
          <img src="@/assets/image/competition/close.png" alt="">
        </div>
        <div class="contentsf">

          <div class="mt20">
            <span class="titles"><span class="xinghao">*</span>章节标题：</span>
            <a-input v-model:value="value" placeholder="" style="width: 400px;height: 40px;" />
          </div>

          <div style="margin-top:20px;text-align: center;">
            <a-button  @click="addcataloguestc=false" style="width: 108px;height: 40px;margin-left: 16px;">取消</a-button>
            <a-button type="primary" style="width: 108px;height: 40px;margin-left: 16px;">确认</a-button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import UE from "@/components/UE.vue";
  export default {
    // 可用组件的哈希表
    components: { UE },
    data() {
      return {

        dataSource: [{
            key: '1',
            name: '国画教学',
            recruit:'李明',
            time:'2020-09-09',
            state: '0',
            state1:'1'
          },
          {
            key: '2',
            name: '国画教学',
            recruit:'李明',
            time:'2020-09-09',
            state: '1',
            state1:'0'
          },
          {
            key: '3',
            name: '国画教学',
            recruit:'李明',
            time:'2020-09-09',
            state: '2',
            state1:'1'
          },
          {
            key: '4',
            name: '国画教学',
            recruit:'李明',
            time:'2020-09-09',
            state: '0',
            state1:'1'
          },
          {
            key: '5',
            name: '国画教学',
            recruit:'李明',
            time:'2020-09-09',
            state: '1',
            state1:'1'
          },
          {
            key: '6',
            name: '国画教学',
            recruit:'李明',
            time:'2020-09-09',
            state: '2',
            state1:'0'
          },
        ],
        columns: [{
            title: '序号',
            dataIndex: 'key',
          },
          {
            title: '课程名称',
            dataIndex: 'name',
          },
          {
            title: '讲师',
            dataIndex: 'recruit',
          },
          {
            title: '投稿时间',
            dataIndex: 'time',
          },
          {
            title: '审核状态',
            dataIndex: 'state',
            scopedSlots: {
              customRender: 'state'
            }
          },
          {
            title: '状态',
            dataIndex: 'state1',
            scopedSlots: {
              customRender: 'state1'
            }
          },

          {
            title: '操作',
            key: 'key',
            dataIndex: 'cover',
            scopedSlots: {
              customRender: 'cover'
            }
          },
        ],
        flag: false,
        onLoading: false,
        tableshow:true,
        createnew:false,
        values:1,
        prevtcshow:false,
        checked:true,
        treeData:[
          {
            title: '第一章：XXXXXXXX介绍',
            key: '0-0',
            children: [
              {
                title: '第一节：XXXXXXXX介绍',
                key: '0-0-0',
                disabled: false,
              },
              {
                title: '第二节：XXXXXXXX介绍',
                key: '0-0-1',
              },
              {
                title: '第三节：XXXXXXXX介绍',
                key: '0-0-2',
              },
            ],
          },
          {
            title: '第二章：XXXXXXXX介绍',
            key: '0-1',
            children: [
              {
                title: '第一节：XXXXXXXX介绍',
                key: '0-1-0',
                disabled: false,
              },
              {
                title: '第二节：XXXXXXXX介绍',
                key: '0-1-1',
              },
              {
                title: '第三节：XXXXXXXX介绍',
                key: '0-1-2',
              },
            ],
          },
          {
            title: '第三章：XXXXXXXX介绍',
            key: '0-2',
            children: [
              {
                title: '第一节：XXXXXXXX介绍',
                key: '0-2-0',
                disabled: false,
              },
              {
                title: '第二节：XXXXXXXX介绍',
                key: '0-2-1',
              },
              {
                title: '第三节：XXXXXXXX介绍',
                key: '0-2-2',
              },
            ],
          },
        ],
        expandedKeys:['0-0-0', '0-0-1'],
        selectedKeys:['0-0-0', '0-0-1'],
        checkedKeys:['0-0-0', '0-0-1'],
        catalogueShow:false,
        addcataloguetc:false,
        addcataloguestc:false,
      };
    },
    mounted() {

    },
    methods: {
      createnewfc(){
        this.tableshow=false;
        this.createnew=true;
      },
      showtable(){
        this.tableshow=true;
        this.createnew=false;
      },
      catalogueShowfc(){
        this.tableshow=false;
        this.catalogueShow=true;
      },
      showtables(){
        this.tableshow=true;
        this.catalogueShow=false;
      },
      addcatalogue(){
        this.addcataloguetc=true;
      },
      addcataloguestcfc(){
        this.addcataloguestc=true;
      }
    },
  };
</script>

<style lang="less" scoped>

  /deep/.ant-upload-picture-card-wrapper {
      width: auto;
      height: 102px;
  }

  /deep/.creatkc .ant-select-selection--single {
    position: relative;
    height: 40px;
    cursor: pointer;
}

  ::-webkit-scrollbar-track-piece {

    border-radius: 6px;
    background-color: #ccc;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #eee;
    background-clip: padding-box;
    min-height: 28px;
  }
  .abstract{
    width: 886px;
    height: 44px;
    background: #F5F5F5;
    line-height: 44px;
    padding-left: 12px;
    margin-bottom: 16px;
  }
  .noyong{
    color:#999999
  }
  .wznr>p{
    margin:8px 0;
    line-height: 24px;
  }
  .prevtitle{
    width: auto;
    height: 33px;
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1A1A1A;
    line-height: 33px;
    margin-bottom: 24px;
  }
  .warptop {
    margin-bottom: 20px;
    height: 30px;
  }

  .previewWarp{
    width: 528px;
    height: 33px;
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1A1A1A;
    line-height: 33px;
    position: fixed;
  }

  .flx3{
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    width: 600px;
  }

  .disinline{
    vertical-align: text-top;
  }

  .form1{
    margin-bottom: 20px;
        margin-top: 12px;
  }

  .checkvalue{
    margin-top: 16px;
  }

  .zjname{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    margin:0 8px;
  }
  .txt88{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }
  .txt32{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .titles{
    display: block;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color:#333333;
    margin-bottom: 8px;
  }
  .zjdpimg{
    width: 24px;
    height: 24px;
    vertical-align: top;
  }
  .mt20{
    margin-top: 20px;
  }
  .xinghao{
    color: #D51313;
    margin-right: 4px;
  }


  .dots {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 6px;
  }

  .dotdaishen {
    background: #FF7E2E;
  }

  .dotyishen {
    background: #3C7EFF;
  }

  .dotyibo {
    background: #D51313;
  }

  .txta {
    margin-right: 16px;
  }

  /deep/.ant-tabs-nav .ant-tabs-tab-active {
    color: #333333;
    text-shadow: 0 0 0.25px currentColor;
    font-weight: 600;
  }



  .zjzhezhao{
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.5);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10000;
    }

    .zjclose{
      position: absolute;
      right: 16px;
      top: 16px;
      cursor: pointer;
    }
    .zjclose2{
     position: absolute;
     right: 0px;
     top: 0px;
     cursor: pointer;
    }

    .zhuanjiainfotc{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 10000;
      padding: 32px;
      width: 480px;
      height: 587px;
      background: #FFFFFF;
      border-radius: 10px;
      overflow-y: auto;
    }

    .zhuanjiainfotcs{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 10000;
      padding: 32px;
      width: 480px;
      height: 245px;
      background: #FFFFFF;
      border-radius: 10px;
      overflow-y: auto;
    }

    .wxleft{
      display: inline-block;
      vertical-align: bottom;
    }

    .wxleft>img{
      width: 48px;
    }

    .mt32{
      margin-top: 32px;
    }

    .wxmt32{
      margin-top:20px;
      height: 65px;
      position: relative;
    }

    .ml16{
      margin-left: 16px;
      margin-top: 10px;
    }

    .ft32{
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #1A1A1A;
      line-height: 30px;
    }

    .infotxt{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1A1A1A;
      line-height: 24px;
    }

    .infotitle{
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1A1A1A;
      line-height: 25px;
      text-align: center;
    }

    .ft14c{
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 20px;
    }

    .flx1{
      display: flex;
      width: 640px;
      justify-content: space-between;
      align-content: space-around;
      flex-wrap: wrap;
      align-items: flex-start;
      flex-direction: row;
    }

    .flx2{
      width: 280px;
      margin-bottom: 20px;
    }

    /deep/.zwxx .ant-select-selection--single{
      height: 40px;
    }
.txtt{
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 16px;
}
.tittxt{
  text-align: center;
  height: 25px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 25px;
}
</style>
